<template>
  <div class="customer-add-page">
    <el-card>
      <div class="customer-add-page__body">
        <div class="customer-add-page__submit-btn">
          <el-button type="primary" @click="onSaveCustomerInfo" size="mini">
            提交
          </el-button>
        </div>

        <el-form
          label-position="left"
          label-width="120px"
          size="small"
          ref="customerInfoForm"
          :model="customerInfo"
          :rules="customerInfoFormRule"
        >
          <el-divider content-position="left">基础信息</el-divider>
          <el-row :gutter="2">
            <el-col :span="8" :offset="2">
              <el-form-item label="客户名称" prop="name" required>
                <el-input
                  v-model="customerInfo.name"
                  :value="customerInfo.name"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" :push="2" :pull="2">
              <el-form-item label="身份证号" prop="IDcard" required>
                <el-input
                  v-model="customerInfo.IDcard"
                  :value="customerInfo.IDcard"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="2">
            <el-col :span="8" :offset="2">
              <el-form-item label="性别" prop="sex" required>
                <el-radio-group v-model="customerInfo.sex">
                  <el-radio :label="0">女</el-radio>
                  <el-radio :label="1">男</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8" :push="2" :pull="2">
              <el-form-item label="生日" prop="birthday" required>
                <el-date-picker
                  v-model="customerInfo.birthday"
                  :picker-options="{
                    disabledDate(time) {
                      return time.getTime() > Date.now();
                    },
                  }"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8" :offset="2">
              <el-form-item label="社保所在地">
                <el-input v-model="customerInfo.ss_location"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="2">
              <el-form-item label="社保是否可转">
                <el-radio-group v-model="customerInfo.ss_moveable">
                  <el-radio :label="1">可以</el-radio>
                  <el-radio :label="0">不可以</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-divider content-position="left">其他信息</el-divider>
          <el-row>
            <el-col :span="18" :offset="2">
              <el-form-item label="备注">
                <el-input
                  type="textarea"
                  :rows="10"
                  v-model="customerInfo.note"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-divider content-position="left">
            证书&挂靠信息({{ certList.length }}条)
          </el-divider>
          <div class="cert-btn-row">
            <div class="cert-btn">
              <el-button
                icon="el-icon-plus"
                type="primary"
                size="mini"
                :disabled="isNew"
                @click="showAddCertDialog()"
              />
            </div>
          </div>

          <el-table
            :data="certList"
            size="mini"
            v-loading="isNew"
            element-loading-text="请保存客户基本信息后再添加证书信息"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
          >
            <el-table-column type="index" width="50" />
            <el-table-column label="证书编号" prop="cert_num" />
            <el-table-column label="人员类型" prop="parent_name" />
            <el-table-column label="资格证专业" prop="type_name" />
            <el-table-column label="发证日期" prop="cert_effect" />
            <el-table-column label="到期时间" prop="cert_overdate" />
            <el-table-column label="挂靠企业" prop="cert_overdate" />
            <el-table-column label="挂靠开始时间" prop="offce_startdate" />
            <el-table-column label="挂靠到期时间" prop="offce_enddate" />
            <el-table-column label="审核状态" prop="status">
              <template slot-scope="{ row }">
                <a-approval-status-tag :status="row.status" size="mini" />
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="{ row }">
                <el-button
                  type="text"
                  icon="el-icon-edit"
                  @click="showAddCertDialog(row)"
                  :disabled="row.status !== 2"
                />
                <el-button
                  type="text"
                  icon="el-icon-delete"
                  @click="onDeleteCert(row)"
                  :disabled="row.status !== 2 && row.status !== 3"
                />
              </template>
            </el-table-column>
          </el-table>

          <el-divider content-position="left">附件</el-divider>
          <div class="cert-btn-row">
            <div class="cert-btn">
              <el-button
                icon="el-icon-plus"
                type="primary"
                size="mini"
                :disabled="isNew"
                @click="onAddAttachmentItem()"
              />
            </div>
          </div>
          <el-table
            :data="attachmentList"
            size="mini"
            v-loading="isNew"
            element-loading-text="请保存客户基本信息后再添加附件信息"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
          >
            <el-table-column type="index" width="50" />
            <el-table-column label="附件描述" prop="title" />
            <el-table-column label="文件">
              <template slot-scope="{ row, $index }">
                <a-file-uploader
                  el-button-type="text"
                  el-button-icon="el-icon-upload"
                  el-button-size="mini"
                  @success="
                    (filePath) => onAttachmentUploadSuccess($index, filePath)
                  "
                  :value="row.file_path"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="上传时间"
              prop="create_time"
            ></el-table-column>
            <el-table-column label="审核状态" prop="status">
              <template slot-scope="{ row }">
                <a-approval-status-tag :status="row.status" size="mini" />
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="{ row }">
                <a-file-downloader
                  :path="row.file_path"
                  :disabled="row.status !== 2"
                />
                <el-button
                  type="text"
                  icon="el-icon-delete"
                  size="mini"
                  @click="onDeleteAttachment(row)"
                  :disabled="row.status !== 2 && row.status !== 3"
                >
                  删除附件
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </div>
    </el-card>

    <customer-cert-info-dialog
      :visible.sync="certDialog"
      :data="certSelection"
      @save-cert-success="fetchDetailData()"
    />
  </div>
</template>

<script>
import index from './index.js';

export default index;
</script>
<style scoped lang="less">
@import 'index';
</style>
